export function DetailDocumentsComponent(props: GridDetailRowProps) {
  const [docs, setDocs] = React.useState([]);

  React.useEffect(() => {     //Load The DPC documents here
    (async () => {
      let job = props.dataItem.Title;
      const w = Web(window.location.origin + "/sites/app");//Lists/ECGDocumentNumberMaster
      const r: [] = await w.lists.getByTitle("ECG-Document-Number-Master").items     //.select('DocumentName')
        .filter("Title eq '" + job + "'")
        .get();
      setDocs(r);
    })();
  }, []);

  const KendoGridLinkCell = (props) => {
    return (
      <td>
        <span title={props.dataItem.Id}>
          <a href={props.dataItem.LinkingUri} target='_blank' >{props.dataItem.DocumentName} </a>
        </span>
      </td>
    );
  };

  const MyTooltipTemplate = (props) => {  
    let findItem = docs.filter(item => item.Id === parseInt(props.title))[0]; /Never hit this line when hover over 
    return (
      <div>
        <h4>{findItem.DocumentName}</h4>
        <object data='{findItem.LinkingUri}' width='700px' height='700px'></object>//Here we need to add the object with the file
      </div>
    );
  };

  const KendoGridDateCell = (props) => {
    const value = props.dataItem[props.field];
    return (
      <td>
        {formatDate(new Date(value), "MM/dd/yyyy hh:mm a")}
      </td>
    );
  };


  return (
    <div>
      <Tooltip content={MyTooltipTemplate} anchorElement="target" position="right">
        <Grid data={docs}  >
          <GridColumn field="Id" title="ID" />
          {/*  <GridColumn field="Title" title="Job" /> */}
          <GridColumn field="DocumentName" title="Document Name" cell={KendoGridLinkCell} />
          {/* <GridColumn field="DueDateTime" title="Due" /> */}
          <GridColumn field="Created" title="Created" cell={KendoGridDateCell} />
        </Grid>
      </Tooltip>
    </div>
  );
}
